<template>
  <basic-container>
    <avue-form :option="option"
               v-model="form">
      <template slot-scope="{disabled,size}" slot="packages">
        <el-button type="primary"
                   size="small"
                   @click="openPic">生成海报
        </el-button>
        <el-calendar v-model="calendarData" v-loading="loading">
          <template
            slot="dateCell"
            slot-scope="{date, data}">
            <div class="date-cell" :class="data.isSelected ? 'is-selected' : ''">
              <div class="calendar-day">
                {{ data.day.split('-').slice(1).join('-') }}
              </div>
              <el-row :span="24">
                <el-col :span=12>
                  <div class="lunch date-item" @click="handleEditItem(data, 1)">
                    <el-tooltip placement="top">
                      <div slot="content">
                        <div
                          v-for="(item, index) in formatSchedule(data, 1)"
                          :key="index"
                        >
                        <span :key="foodIndex" v-for="(food, foodIndex) in item.cookbookFoodList">
                        {{ food.foodName }} {{ foodIndex !== (item.cookbookFoodList.length - 1) ? ' + ' : '' }}
                        </span>
                        </div>
                      </div>
                      <div
                        v-for="(item, index) in formatSchedule(data, 1)"
                        :key="index"
                      >
                        <span :key="foodIndex" v-for="(food, foodIndex) in item.cookbookFoodList">
                        {{ food.foodName }} {{ foodIndex !== (item.cookbookFoodList.length - 1) ? ' + ' : '' }}
                        </span>
                      </div>
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="dinner date-item" @click="handleEditItem(data, 2)">
                    <el-tooltip placement="top">
                      <div slot="content">
                        <div
                          v-for="(item, index) in formatSchedule(data, 2)"
                          :key="index"
                        >
                        <span :key="foodIndex" v-for="(food, foodIndex) in item.cookbookFoodList">
                          <span :style="food.foodStatus === 1 ? '' : 'color: red'">{{ food.foodName }}</span>
                          {{ foodIndex !== (item.cookbookFoodList.length - 1) ? ' + ' : '' }}
                        </span>
                        </div>
                      </div>
                      <div
                        v-for="(item, index) in formatSchedule(data, 2)"
                        :key="index"
                      >
                        <span :key="foodIndex" v-for="(food, foodIndex) in item.cookbookFoodList">
                          <span :style="food.foodStatus === 1 ? '' : 'color: red'">{{ food.foodName }}</span>
                          {{ foodIndex !== (item.cookbookFoodList.length - 1) ? ' + ' : '' }}
                        </span>
                      </div>
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
              <el-row :span="24">
                <el-col :span=24>
                  <div @click="handleEditItem(data, 3)">
                    <el-button v-if="checkHasFood(data, 3)" class="panty" type="success">修改备菜</el-button>
                    <el-button v-else class="panty" type="primary">设置备菜</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-calendar>
      </template>
    </avue-form>
    <el-dialog title="菜品选择"
               append-to-body
               :visible.sync="itemVisible"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :show-close="false"
               width="30%">
      <el-form :model="foodForm" ref="form" label-width="80px" class="food-select-form">
        <el-form-item label="日期: ">
          <el-tag>{{ foodForm.date }}</el-tag>
        </el-form-item>
        <el-form-item label="类型: ">
          <el-tag v-if="foodForm.meal === 1" type="warning">午 餐</el-tag>
          <el-tag v-else-if="foodForm.meal === 2" type="success">晚 餐</el-tag>
          <el-tag v-else type="success">备 菜</el-tag>
        </el-form-item>
        <el-form-item label="已选菜品: ">
          <el-tag v-if="foodSelectedList.length !== 0" :key="index"
                  v-for="(item, index) in foodSelectedList"
                  style="margin-right: 10px"
                  closable
                  :type="item.status === 1 ? 'primary' : 'danger'"
                  @close="handleRemoveFood(index)"
          >
            {{ item.value }}
          </el-tag>
          <el-tag v-if="foodSelectedList.length === 0">无</el-tag>
        </el-form-item>
        <el-form-item label="搜索菜品: ">
          <el-autocomplete v-model="foodForm.foodName" style="width:200px" :fetch-suggestions="queryFoodAsync"
                           placeholder="搜索菜品名称以添加菜品" @select="handleFoodSelect" clearable></el-autocomplete>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleFoodClose">取 消</el-button>
        <el-button type="primary" @click="handleFoodConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="海报生成"
               append-to-body
               :visible.sync="picVisible"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :show-close="false"
               width="70%">
      <el-row>
        <el-col span="8">
          <el-form ref="picForm" label-width="80px">
            <el-form-item label="日期范围: ">
              <el-date-picker
                style="margin-right: 10px; width: 350px !important; height: 32px; line-height: 32px;"
                v-model="dateRange"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="显示kcal: ">
              <el-radio-group v-model="showKcal" @change="updateMaxHeight">
                <el-radio value="1" label="1">是</el-radio>
                <el-radio value="0" label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col span="15">
          <!--          <div id="previewImage" style="width: 648px; height: 1116px" v-html="textContent"></div>-->
          <div id="previewImage">
            <basic-container>
              <el-row style="background-color: #e9eae4;">
                <el-col span="16">
                  <div :style="`height: ${maxHeight}px`" class="img-title" v-if="dateRange.length !== 0">
                    <div style="height: 60%"></div>
                    <div style="padding-left: 13%; color: darkolivegreen">
                      <i style="margin-top: 10px" class="el-icon-date"></i>
                      <div>
                        {{ dateRange[0].substr(5, dateRange[0].length) }}
                      </div>
                      <div>--</div>
                      <div>
                        {{ dateRange[1].substr(5, dateRange[1].length) }}
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :style="borderStyle(index)" class="cookbook-item" span="8" :key="date" v-for="(date, index) in Object.keys(generalCookbookMap)">
                  <el-row>
                    <el-col span="15">
                      <span style="font-weight: bold; font-size: 20px">{{ generalCookbookMap[date][0].week }}</span>
                    </el-col>
                    <el-col span="9">
                      <i style="margin-top: 10px" class="el-icon-date"> {{ date.substr(5, date.length) }}</i>
                    </el-col>
                  </el-row>
                  <hr class="hr-dotted2" style="margin: 10px 0">
                  <el-row>
                    <el-col span="14">
                      <div class="meal-title lunch-title" style="width: 90%">午 餐</div>
                      <div :key="cookbookIndex" v-for="(cookbook, cookbookIndex) in generalCookbookMap[date]">
                        <div v-if="cookbook.meal === 1" class="food-item" v-for="food in cookbook.cookbookFoodList">
                          · {{ food.foodName }}
                        </div>
                        <div class="hr-dotted2" v-if="cookbook.meal === 1"></div>
                        <div v-if="cookbook.meal === 1 && showKcal === '1'" class="kcal">热量 {{ cookbook.kcal }}kcal</div>
                      </div>
                    </el-col>
                    <el-col span="10">
                      <div class="meal-title add-title">配 餐</div>
                      <div :key="cookbookIndex" v-for="(cookbook, cookbookIndex) in generalCookbookMap[date]">
                        <div v-if="cookbook.meal === 3" class="food-item" v-for="food in cookbook.cookbookFoodList">
                          · {{ food.foodName }}
                        </div>
                        <div class="hr-dotted2" v-if="cookbook.meal === 3"></div>
                        <div v-if="cookbook.meal === 3 && showKcal === '1'" class="kcal">热量 {{ cookbook.kcal }}kcal</div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col span="14">
                      <div class="meal-title dinner-title" style="width: 90%">晚 餐</div>
                      <div :key="cookbookIndex" v-for="(cookbook, cookbookIndex) in generalCookbookMap[date]">
                        <div v-if="cookbook.meal === 2" class="food-item" v-for="food in cookbook.cookbookFoodList">
                          · {{ food.foodName }}
                        </div>
                        <div class="hr-dotted2" v-if="cookbook.meal === 2"></div>
                        <div v-if="cookbook.meal === 2 && showKcal === '1'" class="kcal">热量 {{ cookbook.kcal }}kcal</div>
                      </div>
                    </el-col>
                    <el-col span="10">
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="generalColSpan" class="general-footer" :style="`height: ${maxHeight + 4}px`">
                  <el-image :src="tailImgSrc" class="full-image"></el-image>
                </el-col>
              </el-row>
            </basic-container>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handlePicClose">取 消</el-button>
        <el-button type="primary" @click="handlePicConfirm">生 成</el-button>
        <el-button type="primary" icon="el-icon-takeaway-box" @click="handleExport">导 出</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import {getList, submit} from "@/api/cookbook/cookbook";
import {getSelect as foodSelect} from "@/api/food/food";
import {mapGetters} from "vuex";
import {dateFormat, getDateWeek} from "../../util/date"
import html2canvas from "_html2canvas@1.4.1@html2canvas";

export default {
  data() {
    return {
      type: 2, // 营养餐
      form: {},
      query: {},
      loading: true,
      itemVisible: false,
      option: {
        emptyBtn: false,
        submitBtn: false,
        column: [
          {
            label: "",
            prop: "packages",
            slot: true,
            span: 24,
            row: true,
          },
        ]
      },
      data: [],
      foodForm: {
        date: '',
        meal: '',
        foodName: '',
      },
      foodList: [],
      foodSelectedList: [],
      timeout: '',
      calendarData: '',
      picVisible: false,
      generalCookbookMap: {},
      dateRange: '',
      showKcal: '1',
      pickerOptions: {
        shortcuts: [
          {
            text: '今日',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '明日',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() + 3600 * 1000 * 24);
              end.setTime(end.getTime() + 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '昨日',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      imageUrl: 'https://shianjun-1321724122.cos.ap-nanjing.myqcloud.com/upload/meal_hot_health.png',
      previewUrl: '',
      textContent: '',
      previewHeight: '',
      maxHeight: 296,
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.cookbook_add, false),
        viewBtn: this.vaildData(this.permission.cookbook_view, false),
        delBtn: this.vaildData(this.permission.cookbook_delete, false),
        editBtn: this.vaildData(this.permission.cookbook_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    generalColSpan() {
      if (Object.keys(this.generalCookbookMap).length % 3 === 2) {
        return 16;
      } else if (Object.keys(this.generalCookbookMap).length % 3 === 1) {
        return 0;
      } else {
        return 8
      }
    },
    tailImgSrc() {
      if (Object.keys(this.generalCookbookMap).length % 3 === 2) {
        return '/img/tail1.jpg';
      } else if (Object.keys(this.generalCookbookMap).length % 3 === 1) {
        return '/img/tail2.jpg';
      } else {
        return '/img/tail2.jpg';
      }
    },
    borderStyle() {
      return (index) => {
        let style = `height: ${this.maxHeight + 4}px;`
        if (index === 0) {
          return `${style} border-right: #a5b48f 2px dotted; border-top: #92ae6a 2px solid`
        } else if (index % 3 === 0) {
          return `${style} border-right: #a5b48f 2px dotted;`
        } else {
          return style
        }
      }
    },
    searchDateRange() {
      const date = this.calendarData !== '' ? this.calendarData : new Date()
      const monthStart = new Date(date.getFullYear(), date.getMonth(), 1)
      const monthEnd = new Date(date.getFullYear(), date.getMonth() + 1, 0, 23, 59, 59)
      return [dateFormat(monthStart), dateFormat(monthEnd)]
    },
    formatSchedule() {
      return (data, meal) => {
        return this.data.filter(ele => data.day === ele.date && meal === ele.meal)
      }
    },
    checkHasFood() {
      return (data, meal) => {
        let result = false
        this.data.forEach(ele => {
          if (data.day === ele.date && ele.meal === meal) {
            result = true
          }
        })
        return result
      }
    },
  },
  watch: {
    calendarData(val) {
      console.log(dateFormat(val))
      this.init()
    },
  },
  mounted() {
    this.loadFoodList()
    this.init()
  },
  methods: {
    updateMaxHeight() {
      console.log('updateMaxHeight')
      setTimeout(() => {
        this.maxHeight = 296;
        const eleList = document.getElementsByClassName('cookbook-item')
        for (let i = 0; i < eleList.length; i++) {
          const children = eleList[i].children

          let tmpHeight = 0
          for (let j = 0; j < children.length; j++) {
            tmpHeight += children[j].offsetHeight;
          }
          if (tmpHeight > this.maxHeight) {
            this.maxHeight = tmpHeight + 20;
          }
        }
        console.log('this.maxHeight', this.maxHeight)
      }, 500)
    },
    init() {
      const params = {
        startDate: this.searchDateRange[0],
        endDate: this.searchDateRange[1],
        type: this.type
      }
      this.loading = true
      getList(params).then(res => {
        this.data = res.data.data
        this.loading = false
      })
    },
    handleEditItem(data, meal) {
      this.itemVisible = true
      this.foodForm.date = data.day
      this.foodForm.meal = meal

      this.data.forEach(item => {
        if (item.meal === meal && item.type === this.type && item.date === data.day) {
          this.foodSelectedList = item.cookbookFoodList.map(ele => {
            return { id: ele.foodId, value: ele.foodName, status: ele.foodStatus, grid: ele.foodVO.gridCount }
          })
        }
      })
    },
    openPic() {
      this.picVisible = true
    },
    handlePicClose() {
      this.dateRange = ''
      this.generalCookbookMap = {}
      this.picVisible = false
    },
    uploadRequest(file) {
      console.log(file)
    },
    beforeUpload(file) {
      this.imageUrl = URL.createObjectURL(file);
    },
    handleExport() {
      if (this.textContent === '') {
        this.$message.warning('请先生成海报!')
        return
      }

      const that = this
      this.previewHeight = ''
      this.$nextTick(() => {
        let ele = document.getElementById('previewImage')
        html2canvas(ele, {
          useCORS:true,
        }).then((canvas) => {
          const dataURL = canvas.toDataURL('image/png');
          const link = document.createElement('a');
          link.href = dataURL;
          link.download = '营养餐食谱（凉餐）.png';
          link.click();

          that.previewHeight = Math.floor(window.innerHeight / 2)
        });
      });
    },
    handlePicConfirm() {
      if (!this.dateRange || this.dateRange === '') {
        this.$message.warning('请选择要生成的时间范围!')
        return
      }
      this.textContent = ''
      let contentHtml = ''
      contentHtml += `<img alt="img" src="${this.imageUrl}" height="1116" width="648" class="preview-img"/>`
      const startDate = this.dateRange[0]
      const endDate = this.dateRange[1]
      const startText = `${new Date(startDate).getMonth() + 1}.${new Date(startDate).getDate()}`
      const endText = `${new Date(endDate).getMonth() + 1}.${new Date(endDate).getDate()}`
      contentHtml += '<div class="preview-box">'
      contentHtml += `<div v-drag class="preview-title"><h3>${startText} - ${endText}    by 十安君</h3></div>`

      const params = {
        startDate: startDate,
        endDate: endDate,
        type: this.type
      }
      this.loading = true
      let cookbookList = []
      getList(params).then(res => {
        cookbookList = res.data.data
        this.loading = false

        const generalCookbookList = {}
        cookbookList.forEach(ele => {
          const date = ele.date
          ele.week = getDateWeek(ele.date)
          if (!generalCookbookList[date]) {
            generalCookbookList[date] = []
          }
          generalCookbookList[date].push(ele)
        })
        console.log(generalCookbookList)
        this.generalCookbookMap = generalCookbookList

        const itemList = {}
        cookbookList.forEach(ele => {
          if (new Date(ele.date).getTime() >= new Date(startDate).getTime() && new Date(ele.date).getTime() <= new Date(endDate).getTime()) {
            const foodList = ele.cookbookFoodList
            let foodText = ''
            foodList.forEach((food, index) => {
              foodText += (index === foodList.length - 1) ? food.foodName : (food.foodName + '+')
            })
            let type = ''
            if (ele.meal === 1) {
              type = '午餐'
            } else if (ele.meal === 2) {
              type = '晚餐'
            } else if (ele.meal === 3) {
              type = '备选'
            }

            const week = getDateWeek(ele.date)
            if (!itemList[week]) {
              itemList[week] = []
              itemList[week].push(`<div class="preview-item"><span style="font-weight: bold;font-size: 22px;">${week}</span></div>`)
              itemList[week].push(`<div class="preview-item"><span style="font-weight: bold">${type}</span>&nbsp;&nbsp;&nbsp;${foodText}</div>`)
            } else if(foodText !== '') {
              itemList[week].push(`<div class="preview-item"><span style="font-weight: bold">${type}</span>&nbsp;&nbsp;&nbsp;${foodText}</div>`)
            }
          }
        })

        Object.keys(itemList).forEach((key, index) => {
          let marginTop = itemList[key].length === 3 ? 35 : 40
          marginTop = index === 0 ? 80 : marginTop
          contentHtml += `<div style="margin-top: ${marginTop}px;">`
          itemList[key].forEach(item => {
            contentHtml += `<div>${item}</div>`
          })
          contentHtml += `</div>`
        })

        contentHtml += '</div>'
        this.textContent = contentHtml
        this.updateMaxHeight()
      })
    },
    handleFoodClose() {
      this.foodForm = {}
      this.foodSelectedList = []
      this.itemVisible = false
    },
    handleFoodConfirm() {
      if (this.foodSelectedList.length === 0 && this.foodForm.meal !== 3) {
        this.$message.warning('请至少选择一项菜品!')
        return
      }
      let gridCount = 0
      console.log(this.foodSelectedList)
      this.foodSelectedList.forEach(e => {
        gridCount += e.grid
      })
      if (gridCount !== 4 && this.foodForm.meal !== 3) {
        this.$message.warning('餐盒格数必须为4，请选择合适的菜品！')
        return
      }
      const params = {
        cookbookFoodList: this.foodSelectedList.map(food => {
          return {foodId: food.id, foodName: food.value}
        }),
        meal: this.foodForm.meal,
        type: this.type,
        date: this.foodForm.date
      }
      submit(params).then(() => {
        this.init();
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.handleFoodClose()
      }, error => {
        window.console.log(error);
      });
    },
    handleRemoveFood(index) {
      this.foodSelectedList.splice(index, 1)
    },
    handleFoodSelect(val) {
      let gridCount = 0
      this.foodSelectedList.forEach(e => {
        gridCount += e.grid
      })
      if ((gridCount + val.grid) > 4) {
        this.$message.warning('餐格数量超过限制，不允许继续添加！')
        return
      }
      this.foodSelectedList.push(val)
      this.foodForm.foodName = ''
    },
    queryFoodAsync(queryString, cb) {
      const restaurants = this.foodList;
      const results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().includes(queryString.toLowerCase()));
      };
    },
    loadFoodList() {
      foodSelect({status: 1}).then(res => {
        this.foodList = res.data.data.map(item => {
          return { value: item.name, id: item.id, status: item.status, grid: item.gridCount }
        })
      })
    },
  }
};
</script>

<style lang="scss" scoped>
.date-item {
  height: 100px;
  opacity: 0.8;
}

.lunch {
  background-color: #f0f175;
}

.dinner {
  background-color: #7ff176;
}

.panty {
  width: 100%;
}

.date-item-meal {
  margin: 5px;
}

.el-calendar-table:not(.is-range) td.next, .el-calendar-table:not(.is-range) td.prev {
  pointer-events: none !important;
  cursor: default !important;
  color: white;
  background-color: white;
  .date-item {
    background-color: white;
  }
  .panty {
    display: none;
  }
}

.pic-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.pic-uploader .el-upload:hover {
  border-color: #409EFF;
}
.pic-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 216px;
  height: 305px;
  line-height: 305px;
  text-align: center;
}
.pic {
  width: 216px;
  height: 305px;
  display: block;
}

.preview-img {
}
.preview-title {
  margin-left: 155px;
  margin-bottom: 40px;
  font-family: YouYuan;
}

.preview-box {
  position: absolute;
  top: 0;
  margin-left: 60px;
  margin-top: 180px;
  width: 588px;
  //z-index: 1;
}

.preview-item {
  position: relative;
  margin-top: 10px;
  font-weight: 400;
  font-family: STXinwei;
  font-size: 20px;
}

.cookbook-item {
  padding: 5px;
  border-bottom: #92ae6a 2px solid;
  border-left: #a5b48f 2px dotted;
}

.meal-title {
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  font-family: YouYuan;
}

.img-title {
  background: url('/img/cookbook2.jpg') no-repeat;
  background-size: 100% 100%;
  font-weight: bold;
  text-align: left;
  vertical-align: bottom;
  font-family: YouYuan;
  border-bottom: #92ae6a 2px solid;
  border-left: #a5b48f 2px dotted;
  border-top: #92ae6a 2px solid;
}

.general-footer {
  border-bottom: #92ae6a 2px solid;
  border-right: #a5b48f 2px dotted;
  border-left: #a5b48f 2px dotted;
}

.lunch-title {
  background-color: #a4d582;
}


.dinner-title {
  background-color: #a7afd3;
}

.add-title {
  background-color: #e9cea2;
}

.food-item {
  font-family: YouYuan;
  font-weight: 500;
}
.kcal {
  font-family: YouYuan;
  font-weight: 500;
  margin-bottom: 10px;
}
.hr-twill {
  border: 0;
  padding: 3px;
  background: repeating-linear-gradient(135deg, #a2a9b6 0px, #a6de86 1px, transparent 1px, transparent 6px);
}

.hr-shadow {
  border: 0;
  padding-top: 10px;
  color: #d0d0d5;
  border-top: 1px solid rgba(0, 0, 0, .1);
  box-shadow: inset 0 10px 10px -10px;
}

.hr-dotted2 {
  border: 0;
  border-top: 2px dotted #a2a9b6;
  margin: 10px 0;
}

.hr-wavy {
  border: 0;
  color: #d0d0d5;
  height: .5em;
  white-space: nowrap;
  letter-spacing: 100vw;
  padding-top: .5em;
}

.hr-wavy::before {
  content: "\2000\2000";
  /* IE浏览器实线代替 */
  text-decoration: overline;
  /* 现代浏览器 */
  text-decoration: overline wavy;
}

.full-image {
  object-fit: cover;
  width: 100%;
  height: 100%
}

.el-col {
  margin-bottom: 0px;
}
</style>
